carousel()
function carousel() {
    $('.carousel .carouselUl li').each(() => {
        $('.carousel ol').append($('<li></li>'))
    })
    $('.carousel ol li').first().css('background-color', 'red')
    // 给ul前后复制新的li
    var $first = $('.carousel .carouselUl li').first().clone()
    $('.carousel .carouselUl').prepend($('.carousel .carouselUl li').last().clone())
    $('.carousel .carouselUl').append($first)
    // 设置ul样式
    $('.carousel .carouselUl').css({
        width: $first.width() * $('.carousel .carouselUl li').length + 'px',
        left: -$first.width() + 'px'
    })
    // 定义变量
    var index = 1;
    var flag = true
    //右击
    $('.carousel>a.rightBtn').click(function () {
        if (!flag) return false;
        flag = false;
        index++
        $('.carousel .carouselUl').animate({
            left: -index * $first.width()
        }, 1000, 'swing', function () {
            if (index === $('.carousel .carouselUl li').length - 1) {
                index = 1
                $('.carouselUl').css('left', -$first.width() + 'px')
            }
            $('.carousel ol li').eq(index - 1).css('backgroundColor', 'red').siblings().css('backgroundColor', '#000')
            flag = true
        })
        return false;
    })
    //左击
    $('.carousel>a.leftBtn').click(function () {
        if (!flag) return false;
        flag = false;
        index--
        $('.carousel .carouselUl').animate({
            left: -index * $first.width()
        }, 1000, 'swing', function () {
            if (index === 0) {
                index = $('.carousel .carouselUl li').length - 2
                $('.carouselUl').css('left', -index * $first.width() + 'px')
            }
            $('.carousel ol li').eq(index - 1).css('backgroundColor', 'red').siblings().css('backgroundColor', '#000')
            flag = true
        })
        return false;
    })
    //小圆点点击
    $('.carousel ol li').click(function () {
        if (!flag) return false;
        flag = false;
        index = $(this).index() + 1
        $('.carousel .carouselUl').animate({
            left: -index * $first.width()
        }, 1000, 'swing', function () {
            $('.carousel ol li').eq(index - 1).css('backgroundColor', 'red').siblings().css('backgroundColor', '#000')
            flag = true
        })
    })
    //自动轮播
    var timerId = setInterval(function () {
        $('.rightBtn').trigger('click')
    }, 2000)
    //移入移出
    $('.carousel').hover(function () {
        clearInterval(timerId)
    }, function () {
        timerId = setInterval(function () {
            $('.rightBtn').trigger('click')
        }, 2000)
    })
}
var tmcs = document.querySelector('.tmcs')

promiseAjax({
    url: '/wangyi',
    method: 'post',
}).then(res => {
    res = JSON.parse(res)
    var data = res.data.newItems
    // 遍历数据做li
    let i = 0
    data.forEach(item => {
        var li = `
                <li  class="add" detail-id="${item.id}">
                    <img src="${item.listPicUrl}" width="100%" height="200" title="${item.name}" index="${i}" style="background-color:#F4F4F4;border-radius: 10px;">
                    <p style= "width: 160px;height:30px; margin:0 auto;font-size:13px; font-weight: bold;">${item.name}</p>
                    <p style="color: red">¥${item.retailPrice}</p>
                </li>
            `
        i++
        tmcs.innerHTML += li
    })
    $('.add').hover(function () {
        $(this).children().first().attr('src',data[$(this).find('img').attr('index')].scenePicUrl)
    }, function () {
        $(this).children().first().attr('src',data[$(this).find('img').attr('index')].listPicUrl)
    })
    $('.add').on('click', function () {
        var id = $(this).attr('detail-id')
        var item = data.find(item => {
            return item.id == id
        })
        item = JSON.stringify(item)
        localStorage.setItem('item', item)
        location.href = '../xiangqing.html'
    })
})


